// 页面加载事件，等页面渲染完毕再执行 js
window.addEventListener("load", () => {
  // 先获取上传的这个图标
  let uploadFile = document.querySelector('#file')
  // 获取整个 list 和 file 这个框
  let list = document.querySelector(".list")
  let file = document.querySelector(".file")

  // 为这个图标添加 change 事件，当你选中图片然后点击确定时触发
  uploadFile.addEventListener("change", function () {
    // this.files 是获取到的数据，是一个类数组对象，所以我们只能用普通 for 循环，或者使用 for of 
    for (const item of this.files) {

      // 正则表达式判断用户选择的是否是图片类型
      if (!/image\/\w+/.test(item.type)) {
        alert("只能选择图片")
        return
      }

      // 创建一个 FileReader（）对象
      let reader = new FileReader()
      // readAsDataURL 方法可以将上传的图片转化为 base64，然后再存入到图片路径，这样就可以上传任意位置的图片
      reader.readAsDataURL(item)
      reader.addEventListener("load", function () {
        // reader.result 得到的是转换后的图片 base64 格式，可以直接放到 src 路径即可
        let li = document.createElement('li')
        li.innerHTML = `
        <div class="close">x</div>
        <img src="${this.result}" />
      `
        // 每次生成一个 li 节点就添加到 file 这个元素之前
        // insertBefore 是将一个元素添加到谁的前面
        // 第一个参数是新元素，第二个元素是已有元素
        list.insertBefore(li, file)
      })
    }
  })

  // 删除 ，因为每次添加新的 li 元素都会重绘 dom 树，没办法给每个 .close 元素绑定事件，这里我们就用事件委托实现
  list.addEventListener("click", (e) => {
    // e 是页面一开启就自动生成的事件对象
    // e.target 是触发事件的对象， nodeName 是每一个 dom 元素的节点，且元素都是大写
    // 这里就是如果点击的是 x 号就删除，否则不删除
    if (e.target.nodeName == "DIV") {
      // removeChild 是移除子元素，括号写的是：点击的 div 对应的父元素就是某个 li 了
      list.removeChild(e.target.parentNode)
    }
  })
})